<template>
  <el-dialog
    :title="
      controlDeviceInfo.deviceParentName +
        '/' +
        controlDeviceInfo.name +
        '-任务列表'
    "
    :append-to-body="true"
    :visible="visible"
    width="80%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="close"
  >
    <div>
      <el-table :data="taskDownLoadInfos" size="small" border>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table
              v-if="scope.row.childrenList.length"
              :data="scope.row.childrenList"
              border
              size="mini"
            >
              <el-table-column type="index" label="序号" />
              <el-table-column
                prop="taskchildnumber"
                label="子任务号"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.taskchildnumber }}
                </template>
              </el-table-column>
              <el-table-column
                prop="partNumber"
                show-overflow-tooltip
                label="零件号"
              >
                <template slot-scope="scope">
                  {{ scope.row.partNumber }}
                </template>
              </el-table-column>
              <el-table-column
                prop="batchNumber"
                show-overflow-tooltip
                label="批次号"
              >
                <template slot-scope="scope">
                  {{ scope.row.batchNumber }}
                </template>
              </el-table-column>
              <el-table-column
                prop="processNumber"
                show-overflow-tooltip
                label="工序/工步号"
              >
                <template slot-scope="scope">
                  {{ scope.row.processNumber }}
                </template></el-table-column
              >
              <el-table-column
                prop="processName"
                show-overflow-tooltip
                label="工序/工步名称"
                width="120"
              >
                <template slot-scope="scope">
                  {{ scope.row.processName }}
                </template>
              </el-table-column>
              <el-table-column
                prop="partTotalCount"
                show-overflow-tooltip
                label="数量"
                ><template slot-scope="scope">
                  {{ scope.row.partTotalCount }}
                </template>
              </el-table-column>
              <el-table-column
                prop="materialMark"
                show-overflow-tooltip
                label="材料牌号"
                ><template slot-scope="scope">
                  {{ scope.row.materialMark }}
                </template>
              </el-table-column>
              <el-table-column
                prop="craftVersion"
                show-overflow-tooltip
                label="工艺版次"
                ><template slot-scope="scope">
                  {{ scope.row.craftVersion }}
                </template>
              </el-table-column>
            </el-table>
            <slot name="formula" :row="scope.row">
              <el-table
                v-if="_formulaInfo && _formulaInfo.length"
                style="margin-top: 10px"
                :data="scope.row.formulaDownloadZKInfo"
                border
                size="mini"
              >
                <el-table-column
                  :prop="item.key"
                  show-overflow-tooltip
                  :label="item.label"
                  align="center"
                  v-for="(item, index) in _formulaInfo.filter(f => !f.hide)"
                  :key="index"
                  ><template slot-scope="downscope">
                    <span v-if="item.type == 'radio'">
                      {{ radioLable(item, downscope) }}
                    </span>
                    <span v-else>
                      {{ downscope.row[item.key] || "-" }}
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </slot>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          type="index"
          width="50"
          label="序号"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="taskNumber"
          label="任务号"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.taskNumber }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="partName"
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            {{
              scope.row.taskStatus !== ""
                ? TASK_STATUS[Number(scope.row.taskStatus)]
                : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="lastOutTime"
          label="时间"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.createdDate | formatDate }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="partNumber"
          label="零件号"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.partName }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="batchNumber"
          label="批次号"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.batchNumber }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="processNumber"
          label="工序/工步号"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.processNumber }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="processName"
          label="工序/工步名称"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.processName }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="partTotalCount"
          label="数量"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.partTotalCount }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="materialMark"
          label="材料牌号"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.materialMark }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="craftVersion"
          label="工艺版次"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.craftVersion }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="自定义任务下发"
              placement="top"
            >
              <i
                class="el-icon-edit"
                style="font-size: 18px; margin-right: 10px; color: #409eff"
                @click="editStage(scope.row)"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="任务下发"
              placement="top"
            >
              <i
                class="el-icon-bottom"
                style="font-size: 18px; color: #409eff"
                @click="handleIssued(scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer">
      <el-button size="small" @click="close"> 取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { TASK_STATUS } from "../../../js/utils";
import _ from "lodash";
import { mapGetters } from "vuex";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },

    manufactureSite: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      isIssued: false,
      TASK_STATUS,
      stageVisible: false,
      row: {},
      stageTable: [],
      stageBtnloading: false
    };
  },
  computed: {
    ...mapGetters(["controlDeviceInfo", "taskDownLoadInfos"]),
    radioLable() {
      return function(item, downscope) {
        return (
          item.options.find(f => f.value == downscope.row[item.key])?.label ||
          "--"
        );
      };
    },
    _formulaInfo() {
      return this.controlDeviceInfo._formulaInfo || [];
    },
    // 是否是自定义组件
    _stageComponentsName() {
      return this.controlDeviceInfo._stageComponentsName || "StageComs";
    },
    deviceToken() {
      return this.controlDeviceInfo.token;
    }
  },
  watch: {},
  mounted() {
    // 获取任务下发弹框列表
  },
  methods: {
    // 编辑
    async editStage(row) {
      this.$emit("editStage", _.cloneDeep(row), false);
    },
    // 下发
    handleIssued(row) {
      this.$emit("editStage", _.cloneDeep(row), true);
    },
    close() {
      this.$emit("update:visible", false);
    }
  }
};
</script>

<style></style>
